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ABSTRACT 



This paper presents guidelines for World Wide Web-based 
instructional design, based on the 3Ls (i.e., linking, layout, and learner 
support) . The first section, focusing on macro level design, discusses nodes 
and links, including how nodes work, determining nodes, node size, 
presentation format, characteristics of links, and kinds of links. The second 
section deals with micro level design, and focuses on the page/screen design 
issues of legibility, visibility, and recognizability . Basic typography is 
also discussed, and specific micro and macro level design guidelines for Web 
site and page layout are outlined. In the third section, detailed learner 
support strategies for Web sites are listed. Five figures list design 
guidelines for nodes and links, macro level design guidelines for Web site 
and page layout, micro level design guidelines for Web site and page layout, 
macro level learner support guidelines, and micro level learner support 
guidelines. (AEF) 
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Abstract: If you are just starting to develop Web-based instruction, you may be wondering how to 
make decisions regarding the overall look-and-feel of your Web site. If this is the case, then 
understanding how the 3Ls — linking, layout, and learner support — of Web-based instructional 
design can help you develop an effective structure for your instructional products. Consistent with 
the hypermedia learning environment design guidelines provided by Kommers, Grabinger, and 
Dunlap [Kommers et al. 1996], the following WBI design guidelines will provide some guidance 
for laying the foundation for your WBI environments. 



If you are just starting to develop Web-based instruction (WBI), you may be wondering how to make decisions 
regarding the overall look-and-feel of your Web site. If this is the case, then understanding how the 3Ls — linking, 
layout, and learner support — of Web-based instructional design can help you develop an effective structure for 
your instructional products. The guidelines — or heuristics — presented in the paper will give you a foundation for 
doing basic Web page design; in fact, I provide these guidelines to my students in introductory HTML courses to 
give them a starting point. The basis for these guidelines are four chapters cover topics related to the design of 
hypermedia learning environments [Kommers et al. 1996]; I revisited and adjusted the hypermedia design 
guidelines to better reflect design requirements of Web environment. Although not empirically based, the 
following WBI design guidelines (presented more as a job aid or performance support tool) will provide you will a 
practical way to begin thinking about WBI design as you begin developing your own WBI environments. 



Nodes and Links: Macro Level Design 

Nodes and links are the basic building blocks of Web and other hypermedia systems — they are what allows 
learners to maneuver through a Web site or move from one Web site to another with the click of a mouse button; 
the node/link mechanism is what makes the Web a hypermedia technology. Nodes are information units within a 
Web site. Links are the way these information units are physically and conceptually connected and interrelated. 
Web designers use the depth and breadth of content coverage to determine the links and nodes needed to meet the 
learning and information dissemination objectives of the Web site. 



More About Nodes 



How Nodes Work 
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Web nodes may be accessed, if supported with the appropriate links, in any sequence that meets the learning and/or 
information needs and interests of the learners. Rather than coming across as a continuous linear flow of 
information, such as that found in books or videotapes, Web sites chunk information into nodes and establish 
connections between the different nodes. This is referred to as modularizing the information on a Web site. 
Modularization enables users of Web-based instruction (WBI) to determine for themselves which node to access 
next. It may be that a node consists of an elaboration, an opposing point of view, an example, or an illustration. In 
a typical Web-based application, learners navigate through the program via links because they want to get from 
one segment of information to another — one node leads to another. For example, one learner engaged in a Web site 
covering English history may go to a node on the reign of King James I and see a reference to the works of 
William Shakespeare. This reference may encourage the student to proceed to a node that provides information on 
the works of William Shakespeare. Another learner viewing the same node on King James I may be intrigued by a 
reference to Mary, Queen of Scots and choose to access that node instead. Therefore, by modularizing the 
information in a Web site, learners are able to access information more efficiently. This kind of flexibility provides 
learners with opportunities to explore a wider variety of information on the topics that they are studying. 
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Determining Nodes 



Determining the nodes needed for your Web-based instructional site begins with defining and focusing on your 
content area. To determine what will be included in the WBI, you must: 

• determine the purpose of your WBI (based on learning objectives, audience, outcomes, etc.); 

• decide how much information will be covered and how it needs to be covered to meet the learning objectives; 
and 

• in the case of an problem-based application, you may need to determine the information necessary for the 
learners to solve a problem or to participate in a simulation. 

After you determine what should be included in the Web site for it to meet the objectives, then comes the tricky 
part of determining how to organize that information into coherent, modularized, easy-to-digest pieces. This is no 
easy task, considering that most Web sites rely on an abundance of information in order to fulfill the information 
and/or learning needs or interests of the target audience. But how do you decide how the information should be 
chunked? 



Node Size 

The easiest way to think about nodes when trying to determine size is to think of them as separate pages or screens, 
each containing one idea or concept. Nevertheless, the size of a node raises interesting problems in a Web 
environment. A book gives learners direct physical reference cues to its size and to the location of information 
relative to the rest of the information in the book — visual and touch comparisons are easily made. On the Web, 
however, the next node always replaces the previous node. The “next” node may be fi'om an earlier or later part of 
the WBI. It may or may not be in direct sequence. The physical anchors so important in the print medium (i.e., 
thickness of the book, position within a chapter, number of pages) disappear and so does our ability to make 
comparisons and keep track of where we are at any given point. It is also important to remember that people do not 
care to read a great deal of text fi‘om computer screens, so information must appear manageable and brief. 



Presentation Format 

Within each node type, the format of the information can vary significantly, depending on the best 
way to represent that information. In fact, many different forms may make up one node: text, 
graphics, animation, video, or audio. 



More About Links 
Characteristics of Links 

Web-based applications connect nodes of information through links - one node is connected to other nodes via 
links Links are the essence of Web-based applications. A well-designed set of links reveals information and helps 
learners attain their objectives. A poorly designed set of links misinforms learners or inadvertently hides things 
fi'om them. 

On the Web, links are typically represented in two ways: different colored text or an imagemap (i.e., a hyper 
graphic or photograph that engages a link). Learners know that a link is available when they pass their mouse 
cursor over the colored text or imagemap and the cursor changes fi-om an I-beam to a pointer or fi-om a pointer to a 
finger-pointing hand. In addition, Web links usually use a visual cue to indicate the activation of a link, such as 
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changing color. For example, the current color convention for text-based links is to use blue to indicate which text 
is an 

active/available link, red to indicate that you have successfully clicked on an active link, and purple to indicate a 
previously visited link. 



Kinds of Links: Contextual Links 

Contextual links join various parts of a Web-based instructional system to enable learners to find the information 
they need. There are two types of contextual links: sequential and relational. 

Sequential Links. Sequential links create a linear path among a set of related nodes. A set of sequential links is a 
predetermined path through a Web site that directs learners to either go to the next node or the previous node. 
They are most easily represented by the ever-present left and right arrows. The caveat associated with sequential 
links is that you may direct learners to go linearly through a series of nodes, but they don’t have to due to the hyper 
nature of the Web. 

Some Web sites provide default routes through the site represented by clickable arrows or table of contents. 
Learners who do not wish to make their own way through a Web site may elect to use a path defined by the site’s 
designer. A linear path is especially useful when a learner should view each node in a particular sequence in order 
to better understand the content. 



Relational Links. Relational links enable learners to pursue information tied together by common elements, 
although not in a sequential manner. There are three main kinds of relational links: associative, elaborative, and 
hierarchical. 

Associative Links. An associative link searches for information related to (or associated with) a specific node, 
word, or phrase. A set of associations creates a web or network of different kinds of related information that can be 
accessed from multiple points within the Web site. Associative relationships are often defined more by the needs of 
the learners than by the content. They permit learners to jump across different nodes and Web pages to find 
information pertinent to their needs and interests. Associative links are significant parts of most WBI systems 
because they provide access to information in ways that were not planned by the designer. The goal behind the 
creation of associative links is to emulate the way people think. We do not think or process information in 
a linear manner; instead, we take in information simultaneously from a variety of inputs. The concept of 
hypermedia environments was developed to allow users to follow their own associations. It is these kinds of links, 
that if well-designed, provide learners access to all the information in a Web-based learning environment. 
Associations can be created by using keyword searches or by setting up links based on a variable setting which 
represents a learner’s actions. The primary advantage of associative links is flexibility: the more flexible the links, 
the more powerfiil the system. Associative links provide a means of individualization — a way of making 
information more personally meaningfiil. 



Elaborative Links. Although the relationship between two associated nodes may be defined either by context or by 
learner goal, the relationship between two elaborative nodes is context dependent. An elaborative link is a special 
kind of sequential link that provides more complex and more detailed information on a specific topic. An 
elaborative series of links differs from a sequential series of links because learners are free to decide whether or not 
to enter the elaborative series and, once the series is entered, how deep to go. 



Hierarchical Links. A hierarchical structure links information in a progressive manner, illustrating rank or level of 
importance. Hierarchical links provide a good overall organizing structure for Web-based environments that deal 
with several levels of classifications, such as diagnosis within a class of diseases, explanation of genus in biology, 
or description of an organizational structure. They differ from elaborative links in that the path down through the 
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hierarchy is not usually optional: For learners to understand the hierarchy, they must continue along the complete 
path. Therefore, hierarchical links are highly structured, leading learners through a logical path with a 
predetermined end. 



Nodes 


1 


Where possible, modularize information on each Web page in the site so that each node fits easily on one screen or window. 




2 


Label sections of the Web page to describe the kinds of information they contain. 




3 


If possible, avoid forcing learners to scroll through screen after screen of text. Exception: lists (like a glossary) and indexes. 




4 


Use different backgrounds to distinguish among different node media formats. 




5 


If resources are available, use the node form that most ^propriately represents the information contained in the node. 


General Links 


1 


Avoid the “click here” syndrome. For example, when you want people to know that your name is a link for sending you 
email, make your name the actual link. 




2 


Avoid too many text-based links in a paragraph of text. Too many links can distract from the overall message trying to be 
conveyed. 


Sequential Links 


1 


Use arrows when the option of proceeding through a hypertext in a sequential path is necessary. When it is appropriate to 
design a sequential path through a hypertext (e.g., presenting chronologies or logical step-by-step processes), providing users 
with left and right arrow keys informs them that they are proceeding through the information in a sequential fashion. (Note 
The use of lefl/right arrows may be culturally bound. Societies that read from top to bottom may be more comfortable with 
up/down arrows.) 




2 


When using left/right arrows to proceed through several pages of information related to one idea, remove the left arrow from 
the first page/screen and the right arrow from the last page/screen. 




3 


In a multiple section or page sequence, use the section or page x of y strategy to tell 
learners how many pages are in the sequence and where they are in the sequence. 


Associative Links 


1 


To remind learners of where they are within a Web site, provide extensive verbal/textual support. Web pages should always 
include headings to indicate what the topic of the page is and to which section it belongs. Extensive use of menu and content 
lists are also helpful. 




2 


Where there is a sequence representing critical information, build the sequence into the associations so the user does not miss 
part of the sequence. In other words, use sequential strategies. 


Elaborative Links 


1 


Use elaborative links to present information in a progressively deeper manner (or in a progressively less detailed manner). 




2 


Make learners aware of the depth to which a sequence of elaborations goes (e.g., “level 1 of 5 ”). 


Hierarchical Links 


1 


Hierarchies are highly structured. Keep users aware of that structure with verbal and graphic support. 




2 


Use up/down arrows to indicate the path through a hierarchy. Indicate which level of the hierarchy a learner has entered (e.g., 
“level 1 of 5”). 



Figure 1. Design Guidelines for Nodes and Links 



Page/Screen Design Issues for Web Sites: Micro Level Design 

The objective of effective WBI is to communicate information and ideas to a specific audience. Thus, a Web site 
requires more design consideration regarding the display of text and graphics on a page than a work of fiction such 
as a novel or short story. Novels maintain reader involvement with literary devices such as plot, story, 
characterization, theme, and dialogue. In WBI, learner involvement through literary devices is not always possible 
or desirable. While fiction gets by quite well with page after page of one word beside another, WBI uses more than 
words. Web-based instructional programs are for learning, and require different techniques to maintain learner 
involvement and encourage cognitive processing of content. 

As you probably have already noticed, Web-based instructional applications tend to rely heavily on the written 
word to present information. Even Web sites using a large number of sophisticated graphics and animation 
combine those graphic forms with written words. All of this information is presented by combining text elements, 
images, and graphic devices (e.g., lines, shading, boxes) in an empty space to present information. The 
combination and arrangement of text and graphical elements in meaningful ways are problems of message design 
and layout. 

Some of the Web page design elements which require consideration include: 



type size, style, weight 


contrast 


header, body, footer 


animation 


word spacing 


foreground color 


tables, frames 


special effects 


leading, kerning 


background color 


fields, forms 


graphic resolution 


rules 


background texture 


buttons, icons, imagemaps 


text-to-graphic balance 


headings 


letter color 


pop-up windows, alerts 


shading 



However, none of these elements matter unless they are organized and displayed to promote legibility. 



Legibility 

Techniques used to facilitate learner involvement with WBI fall within the domain of legibility. Legibility is the 
influence of the total format of the display on the ability of the learner to understand the text. The words “total 
format” are emphasized because we often tend to think of legible text as that which can be seen. However, visibility 
is only one part of legibility. Legible text possesses two primary design qualities which designers must work to 
enhance: visibility and recognizability. You have to work, to some extent, with these three qualities to facilitate 
retention of information by encouraging deeper learner involvement. 



Visibility 

Visibility refers to the perceptual detectability and discriminability of the printed character. Visibility includes 
characteristics related to the clarity of the image, crispness of type, and contrast between foreground and 
background. A visible display presents symbols clearly and accurately. Visibility variables interact with the 
eyesight of the reader, as well as with conditions external to the reader such as lighting. For example, a Web page 
with poor contrast between letters and background fails the visibility test of legibility, because without adequate 
contrast the shapes of the letters would stand out Irom the background. Another important factor in visibility is the 
size of the text. Letters that are too small may not be perceived for what they are. Visibility is a prerequisite for 
recognizability, for without adequate visibility the learner fails to recognize the meaning of individual symbols on 
the Web page. 



Recognizability 

Recognizability refers to the ability of a Web page to convey the meaning of letters, words, and objects. A 
recognizable Web page presents meaningful symbols so the meaning of each symbol can be identified and 
understood. Recognizability interacts with both text elements and reader characteristics — the background or prior 
knowledge of the reader. For example, a first grader may be able to recognize each of the letters on this page, but 
would have difficulty recognizing the meanings of all of the word symbols on this page, even though they are quite 
visible. Additionally, a screen display in Russian may be quite visible, but it would not be recognizable to most 
North Americans because most North Americans would not be able to perceive the meaning of each symbol or the 
words made up by the symbols. Format variables that effect recognizability include type style, word spacing, 
leading (amount of space between lines), and kerning (amount of space between letters). 

Basic Typography 

After Gutenburg invented the printing press, the primary focus on the science of typography was the creation of 
visible and perceptible documents. The principle typography factors related to the visibility and perceptibility of a 
document include type size, type style, line length, leading, case, and Justification. A great deal of research has 
been performed with these type variables in the printed page world leading to accepted standards. Generally, 
research into the application of these standards to computer monitors has supported the findings of print 
researchers, as well as have generated research findings regarding characteristics unique to the use of screens (for 
example, see Grabinger, 1993) [Grabinger 1993]: contrast, resolution, brightness levels, color, font style, and 
visual fatigue. These findings include: 

• Use only a few simple, familiar, and portable type styles. Use both lower and upper case text. 

• Use type sizes appropriate for the audience and the amount of reading to be done. Be consistent in their use. 

• Keep line lengths reasonable. Generally, use single spacing between lines of text. 

• Left Justification is adequate. Use full Justification only when proportional spacing is available. 
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Macro Level Design: Site/Page Layout 



The macro level organization of a Web page refers to the general layout. The constructs of organization and visual 
interest provide some heuristics for arranging text elements to create Web pages learners want to read and study 
from. Instead of wondering about each individual text element, you can focus on arranging whatever elements you 
want to use to create organized, structured, and visually interesting Web sites. Storyboarding is a great way to 
begin making Web site and page layout decisions. Use accepted aesthetic publication guidelines. Strive for balance, 
harmony, and simplicity. A good reference for these guidelines is Yale C/AIM Web Style Guide 
(http://info.med.yale.edu/caim/manual/). 



Site/Page Layout: Macro 
Level 


I 


Begin macro level organization of the Web page by dividing the page into functional areas appropriate to desired tasks and 
consistent with the knowledge level of the learners. Use a header, body, and footer structure. Maintain this level of 
organization with only minor changes throughout the Web site. 




2 


Maintain consistent internal margins and distribute the bulk of the white space around the exterior margins of the Web page 
to help create a sense of balance. 

Distribute light and dark areas and objects evenly around the Web page. 




3 


Create a separate area to indicate important status and orientation information: location, page, topic, subtopic, objective, and 
so on. 




4 


Keep any navigation controls in a separate area. Consistently use the same area of the Web page for the controls. 




5 


Use graphic devices including boxes, shading, color, white space, and textures to organize the functional areas and set them 
apart from each other on the Web page. 




6 


Avoid Web pages that are solely text without any graphic devices or illustrations. However, keep Web pages simple and 
avoid too many graphical devices. They can be distracting, and take the learner’s attention away from what is really important. 




7 


Use tables or preformatted text (although using tables is more flexible) to create a unified, clean, structured layout for your 
Web site. 




8 


Use frames with caution. Unless implemented well, frames can cause some navigational confusion. In addition, frames car 
eat up a lot of a screen’s real estate, making the text in each frame more difficult to read. If you are using frames to create a 
divided layout, consider using tables to accomplish the same requirements. 




9 


When using frames, enable learners to also access the site in a non-frame format. 



Figure 2. Macro Level Design Guidelines for Web Site and Page Layout 
Micro Level Design: Site/Page Layout 

Micro level organization of the Web page refers to structural techniques to reflect the organization of the content. 
The constructs of structure and organization provide some heuristics for arranging text elements to create Web 
pages that help learners organize the content. Micro level organization refers to how the content is presented 
within the overall macro level design. 



Site/Page Layout: Micro 
Level 


1 


Remember that the audience is looking at your Web site on a computer screen. Select font sizes that are large enough to 
easily read for better visibility. Use a sans serif font for better legibility. 




2 


Keep one idea per Web page. 




3 


Use margins to improve readability of pages. 




4 


Use indents to indicate hierarchically related subject material. 




5 


Group closely related items within a box, table, or a common background color or shading. Use the same graphic devices, as 
well as white space, to separate unrelated or contrasting ideas. 




6 


Use headings as organizers. 




7 


Use directive cues (i.e., bold, italic, underlining, inverse) to emphasize important terms or ideas. 




8 


If using background textures, keep in mind the “mood” you are trying to create. Also, if the background is too elaborate, text 
can be difUcult to read. 




9 


If using imagemaps for navigational purposes, consider employing an image that reflects the metaphor and/or content of th< 
site. 




10 


If you use columns to organize text and graphics, don’t let the columns be longer than the screen length to avoid excessive 
saolling. 




11 


Set up comparison/contrast situations in a side-by-side columnar arrangement. 




12 


Don’t incorporate JavaScript, applets, animated gifs, or sound flies unless there is a clear purpose. These elements can be 
time-consuming to download. If you want to include them without causing trouble for users, give users the power to decide if 
they want to see or hear them. 



Figure 3. Micro Level Design Guidelines for Web Site and Page Layout 



Learner Support Strategies for Web Sites 

Hypermedia applications, such as Web-based instructional sites, are often highly complex owing to the flexibility 
of environments in which they can be used and the depth and breadth of information they make available to 
learners. This level of complexity can leave users feeling confused and fhistrated. Unfortunately, designers of 
hypermedia consistently make a serious error. They forget or ignore what it is like to be a novice user of a 
hypermedia environment. If initial support is lacking, learners may be unable to access the Web site’s contents. 
This problem can be quite a disappointment for both the learner and the designer. Regardless of how wonderful the 
Web-based instructional site is, it is useless to learners who have neither the tools nor the information to access it. 
Therefore, providing this support based on the learners’ characteristics and determined needs helps to insure that 
they are able not only to access and use the Web site appropriately, but also to have the positive learning 
experience that results from using the WBI. 



Macro Level Guidelines 


1 


Use site maps to provide learners with valuable graphic representations of where they are witliin a Web-based environment. 
The hypenxQSs of a Web environment can be very powerful because they enable users to direct their own movement through 
the information. However, in power there is confusion. The more flexible the Web site, the easier it is for learners to get lost 
or lose track of their original goals. 




2 


Provide learners with a glossary of terms that they can access at any time if the Web site includes new or unknown terms. 




3 


If the site includes any real-time or timed features, provide learners with the ability to take a time out by including a pause 
feature. 




4 


All Web sites should include detailed help information specific to the site. 




5 


If your Web site requires plug-ins, allow learners to test if they have the necessary plug-ins before they become too involved 
in the site. There is nothing more frustrating for learners than to be interrupted because you need to go and download a plug- 
in. 




6 


Use site maps, check lists, etc. to help learners keep track of their positions in the program. 




7 


If learning is a prime objective of the hypertext, provide a chance for learners to enter a purpose or provide a menu of 
suggested goals to help them stay focused in the WBI environment. 




8 


Design help systems with an eiaborative approach. Keep initial explanations brief and provide options for more in-depth 
information. 




9 


Always include a way to easily get back to the main page of a Web site (e.g., table of contents, site map, etc.). 




10 


When using images, you can provide a low resolution version of the image, which takes relatively less time to download to z 
Web page, as a place holder for a high resolution version that will take longer to download. You can also allow learners to 
choose whether they want to view your Web site with low resolution or high resolution images. 




11 


If your Web site is viewed better under specific conditions (e.g., with a particular browser), inform learners on the title page. 




12 


If components of your Web site are “under construction”, indicate this status to users before they click on a link and discover 
the page cannot be found. Allowing users to click on a link only to find the page with an “Under Construction” notification is 
frustrating to users and a waste of their time. One way of indicating that you are planning a particular link but have not 
completed it is to “gray out” the link; this way users know you are plaiming it but that it is not available yet. 



Figure 4. Macro Level Learner Support Guidelines 



Launching 


1 


To provide learners with a good first impression of your Web-based instructional site, introduce users to the site by providing 
a title screen. 




2 


Immediately following the title screen, provide learners with information regarding the purpose, structure, and rules for usin^ 
the site. 


Web Site Functions 


1 


If you anticipate learners who are unfamiliar with a certain aspect of your Web site (e.g., using the pull-down fields, using the 
Back button of the browser, etc.), build prerequisite instructions into the site. 




2 


To avoid early boredom (what you want is to gain attention and arouse interest), get learners involved in the site as quickly as 
possible. 




3 


If the Web site has several sections/pages (two or more), use a table of contents as a reference point for the site. 


Navigating the Web Site 


1 


Make Web site menus accessible to learners regardless of their position in the site. Strive to make it so that learners only 
have to click on no more than two buttons to get to a menu. 




2 


For more complex Web sites involving more than one level of information (e.g., main sections, primary sections, anc 
subsections), provide learners with a site map that, when accessed, allows them to click on the area of the map they want to 
travel to regardless of its level in the section hierarchy. 




3 


Use metaphors to help convey the Web site's navigational options to learners. 




4 


Prominently display the Web site, section, and page names so learners know where they are in the Web-based instructional 
application at all times. 




5 


Progress indicators should be used as navigational aids when one piece of information has to be divided into more than one 
page. 


Keep Learners Informed 


1 


Use interactivity indicators to keep users informed about their actions within the site. 




2 


If you are using images that take time to load, let learners know that there will be a delay. Incorporate text and images on the 
same page so learners have something to do while the images are loading. 




3 


If the application includes test items, use immediate and individualized feedback to inform learners about the status of theit 
answers to praise them for correct answers and to be supportive in cases of incorrect answers. 
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4 When learners make easily reversible mistakes, provide a forgiveness feature that allows them to undo their last action. 



Figure 5. Micro Level Learner Support Guidelines 
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